<template>
    <div id="main">
        <div id="cesiumContainer"></div>
        <div class="mainContent">
            <div id="Header">
                <my-logo></my-logo>
                <my-search></my-search>
                <my-menu></my-menu>
            </div>
            <my-leftSiderRoom></my-leftSiderRoom>
        </div>
    </div>
</template>

<script>
    import logo from '@/components/logo/logo'
    import search from '@/components/Search/SearchForInput'
    import menu from  '@/components/menu/menuList'
    import leftSiderRoom from '@/components/siderBar/siderBar'
    import ParticleEffect from '@/components/FunctionalUnit/ParticleEffect'
    import Vue from 'vue'
    export default {
        name: "cesiumViewer",
        components:{
            'my-logo':logo,
            'my-search':search,
            'my-menu':menu,
            'my-leftSiderRoom':leftSiderRoom
        },

        mounted(){
             this.viewer = new this.Cesium.Viewer('cesiumContainer',{
                animation : false,
                baseLayerPicker: false,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                infoBox: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
            })
            this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

        }
    }
</script>

<style scoped>
  .mainContent,#main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #Header {
    position:absolute;
    z-index:1;
    padding:10px;
    width:100%;
  }
  #leftSider {
    position:absolute;
    top:50%;
    left:10px;
    padding:10px 5px;
    z-index:1;
    background-color:rgba(28,28,29,.9);
    border-radius:2px;
  }



</style>
